{% extends "gideon/layout.html" %}

{% comment %}
传入参数：
    timeline_items: 数组类型，数组中元素为字典类型
    timeline_items 的 key:
        icon: 节点图标，可以没有，有默认值
        title: 文本标题
        note: 文本内容
        href: 链接地址，可以没有，没有则没有链接按钮显示
        link_title: 链接标题
        data: 时间，格式为2020-09-22
{% endcomment %}

{% block css %}
    <style>
        .lazur-bg {
            background-color: #23c6c8 !important;
            color: #ffffff;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInRight">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-content">
                        <div id="vertical-timeline" class="vertical-container dark-timeline center-orientation">
                            {% for item in data.timeline_items %}
                                {% cycle 'blue-bg' 'lazur-bg' 'navy-bg' 'red-bg' 'white-bg' 'yellow-bg' as bg_style silent %}
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon {{ bg_style }}">
                                        <i class="fa
                                                {% if item.icon %}{{ item.icon }}{% else %}fa-file-text{% endif %}"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2>{{ item.title }}</h2>
                                        <p>{{ item.note }}</p>
                                        {% if item.href %}
                                            <a href="{{ item.href }}" class="btn btn-sm btn-primary">{{ item.link_title }}</a>
                                        {% endif %}
                                        <span class="vertical-date">
                                            {{ item.date | slice:":4" }}<br>
                                        <small>{{ item.date | slice:"5:" }}</small>
                                    </span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}